/**
 * Created by MingIr on 2017/1/22.
 * @author:bjzhang
 */

import React,{ Component } from 'react';
import {
    View,
    StyleSheet,
    Image,
    Text,
    Platform,
    TouchableHighlight,
    DatePickerAndroid,
    Picker,
} from 'react-native';

import PHead from '../module/header';
import renderIf from '../module/renderIf';
import PickerWidget from '../module/picker-widget';

export default class Personal extends Component{
    constructor(props){
        super(props);
        this.state = {
            birthday:'未设置',
            sex:'未设置'
        }
    }

    async birthdaySet(){
        try {
            const {action, year, month, day} = await DatePickerAndroid.open({
                // 要设置默认值为今天的话，使用`new Date()`即可。
                // 下面显示的会是2020年5月25日。月份是从0开始算的。
                date: new Date()
            });
            if (action !== DatePickerAndroid.dismissedAction) {
                let date = new Date(year, month, day);
                this.setState({birthday: date.toLocaleDateString()})
            }
        }catch(err){
        }
    }

    render(){
        return(
            <View style={styles.container}>
                <PHead leftIcon={require('../../icon/camera/camera_icon_back.png')} title='我的'></PHead>
                <View style={[styles.container,styles.paddingContainer]}>
                    <View style={[styles.row,styles.lineBottom]}>
                        <View style={[styles.innerRow,styles.row,styles.headerRow]}>
                            <Text style={styles.titleTx}>头像</Text>
                            <Image style={styles.headerImg} resizeModel={Image.resizeMode.cover} source={require('../../image/sj201402411009_170x264.jpg')}></Image>
                        </View>
                        <Image source={require('../../icon/common/icon_go.png')}></Image>
                    </View>
                    <View style={[styles.row,styles.lineBottom]}>
                        <View style={[styles.innerRow,styles.row]}>
                            <Text style={styles.titleTx}>昵称</Text>
                            <Text style={styles.itemTx}>用户2918550</Text>
                        </View>
                        <Image source={require('../../icon/common/icon_go.png')}></Image>
                    </View>
                    <View style={[styles.row,styles.lineBottom]}>
                        <View style={[styles.innerRow,styles.row]}>
                            <Text onPress={()=>{

                            }} style={styles.titleTx}>性别</Text>
                            <Picker mode={Picker.MODE_DIALOG} style={styles.sexPicker}
                                selectedValue={this.state.sex}
                                onValueChange={(sex) => this.setState({sex: sex})}>
                                <Picker.Item label="男" value="1" />
                                <Picker.Item label="女" value="2" />
                            </Picker>
                        </View>
                        <Image source={require('../../icon/common/icon_go.png')}></Image>
                    </View>
                    <View style={[styles.row,styles.lineBottom]}>
                        <View style={[styles.innerRow,styles.row]}>
                            <Text style={styles.titleTx}>生日</Text>
                            {renderIf(Platform.OS==='android')(
                                <TouchableHighlight onPress={this.birthdaySet.bind(this)}>
                                    <Text style={styles.itemTx}>{this.state.birthday}</Text>
                                </TouchableHighlight>
                            )}
                        </View>
                        <Image source={require('../../icon/common/icon_go.png')}></Image>
                    </View>
                </View>

            </View>
        );
    }
}

const styles = StyleSheet.create({
    container:{
        flex:1,
        backgroundColor:'#fff',
        flexDirection:'column',
        justifyContent:'flex-start',
    },
    paddingContainer:{
        paddingTop:10,
        paddingLeft:15,
        paddingRight:15,
    },
    row:{
        flexDirection:'row',
        justifyContent:'space-between',
        alignItems:'center',
    },
    lineBottom:{
        borderBottomWidth:.4,
        borderBottomColor:'#C8C8C8',
    },
    innerRow:{
        flex:1,
        height:72,
        marginRight:30,
    },
    headerRow:{
        height:84,
    },
    headerImg:{
        width:54,
        height:54,
    },
    titleTx:{
        color:'#5F6484',
        fontSize:15,
    },
    itemTx:{
        color:'#B0B2C2',
        fontSize:15,
    },
    sexPicker:{
        color:'#B0B2C2',
        width:50,
        justifyContent:'center'
    }
});